<template>
  <div class="home_container">
    <div class="leftCom">
      <div class="info">
        <userInfo></userInfo>
      </div>
      <div class="details">
        <detailsList></detailsList>
      </div>
    </div>
    <div class="rightCom">
      <div class="number">
        <numberList></numberList>
      </div>
      <div class="allAnalysis">
        <allAnalysis></allAnalysis>
      </div>
      <div class="analysis">
        <div class="week">
          <weekAnalysis></weekAnalysis>
        </div>
        <div class="type">
          <typeAnalysis></typeAnalysis>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="homePage">
import { ref, reactive, onMounted } from 'vue'
// 引入hooks
import { useData } from '@/hooks'
import userInfo from './components/leftCom/userInfo.vue'
import detailsList from './components/leftCom/detailsList.vue'
import allAnalysis from './components/rightCom/allAnalysis.vue'
import numberList from './components/rightCom/numberList.vue'
import typeAnalysis from './components/rightCom/typeAnalysis.vue'
import weekAnalysis from './components/rightCom/weekAnalysis.vue'
useData('666')

const show = ref(true)
const handleClick = (type: number) => {
  if (type == 1) {
    show.value = true
  } else {
    show.value = false
  }
}

</script>


<style scoped lang="less">
.home_container {
  display: flex;

  .leftCom {
    width: 35%;

    .info {
      width: 100%;
      height: 250px;
      margin-bottom: 10px;
    }

    .details {
      width: 100%;
      height: 550px;
    }
  }

  .rightCom {
    width: 64%;
    margin-left: 10px;

    .number {
      width: 100%;
      height: 160px;
    }

    .allAnalysis {
      width: 100%;
      height: 330px;
      margin-bottom: 10px;
    }

    .analysis {
      display: flex;
      width: 100%;
      height: 310px;

      .week {
        width: 49%;
        height: 310px;
      }

      .type {
        width: 49%;
        height: 310px;
        margin-left: 22px;
      }
    }
  }
}
</style>